<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<!-- <view class="flex-row items-center section_3 space-x-31">
				<u-search class="section_4" placeholder="搜索..." :show-action="true" actionStyle="color:#FF3C2E;"
					v-model="keyword" @change="toSearch" @custom="toSearch" @clear="toSearch"></u-search>
			</view> -->
			<view class="flex-col" v-if="keyword==''&&tipsList.length==0">
				<text class="self-start text_4">当前定位</text>
				<view class="flex-row justify-between section_5">
					<text class="text_5" v-if="address!=''" @click="toIndex1" style="color: #111;">{{address}}</text>
					<text class="text_5" v-else @click="toLocation">定位失败,点击重新定位</text>
					<view class="flex-row items-center space-x-18" @click="toLocation">
						<image class="image_9" src="/static/loaction1.png" />
						<text class="image_10">重新定位</text>
					</view>
				</view>
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<u-index-item>
							<u-index-anchor :text="indexList[index]"></u-index-anchor>
							<view class="list-cell flex-row items-center" v-for="(cell, index) in item"
								@click="toIndex(cell)">
								{{cell.region_name}}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</view>
			<view class="flex-col items-center justify-center tipList" v-if="keyword!=''&&tipsList.length==0">
				<view class="tipItem flex-row items-center">
					暂无数据
				</view>
			</view>
			<view class="flex-col items-center justify-center tipList" v-if="tipsList.length>0">
				<view class="tipItem flex-row items-center" v-for="(item,index) in tipsList" :key="index"
					@click="toIndex(item)">
					{{item.region_name}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	// import indexList from "@/components/indexList.vue"
	// import airport from "@/utils/airport.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import amap from '../../utils/amap-uni.130.js'
	const myAmapFun = new amap.AMapWX({
		key: '3a26f7397fc12384590ae0a8ab25443b'
	});
	onMounted(() => {
		console.log("onMounted");
	})
	onLoad(() => {
		getDate()
		// list.value = airport.list
		if (city.value == "###") {
			toLocation()
		}
		// uni.$on('mapList1', function(res) {
		// 	console.log(res, "mapList1");
		// 	city.value = res.region_name
		// 	adcode.value = res.id
		// 	address.value = res.region_name
		// 	longitude.value = ''
		// 	latitude.value = ''
		// })
	})
	let city = ref('###')
	let adcode = ref('')
	let address = ref('')
	let province_name = ref('')
	let district_name = ref('')
	let keyword = ref('')
	let longitude = ref('')
	let latitude = ref('')
	let member_id = ref(uni.getStorageSync('member_id' || ''))
	let tipsList = ref([])

	const toLocation = () => {
		console.log("toLocation");
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
				console.log(res);
				longitude.value = res.longitude
				latitude.value = res.latitude
				let locat = [res.longitude, res.latitude]
				let location = locat.join(',')
				myAmapFun.getRegeo({
					location: location,
					success: function(data) {
						console.log(data, "回调成功")
						// address.value = data[0].name

						// adcode.value = data[0].regeocodeData.addressComponent.citycode
						if (data[0].regeocodeData.addressComponent.city && data[0]
							.regeocodeData.addressComponent.city.length > 0) {
							address.value = data[0].regeocodeData.addressComponent.city
						} else {
							address.value = data[0].regeocodeData.addressComponent.province
						}
						console.log(address.value);
						// province_name.value = data[0].regeocodeData.addressComponent.province
						// district_name.value = data[0].regeocodeData.addressComponent.district
					},
					fail: function(info) {
						console.log(info, "回调失败")
					}
				})
			},
			fail(err) {
				console.log(err);
			}
		});
	}
	const toSearch = () => {
		// tipsList.value.length=0
		// if(keyword.value!=''){
		// 	itemArr.value.forEach(ele=>{
		// 		ele.forEach(ele1=>{
		// 			if(ele1.region_name.includes(keyword.value)){
		// 				tipsList.value.push(ele1)
		// 			}
		// 		})
		// 	})
		// }
		
		// myAmapFun.getInputtips({
		// 	city: adcode.value,
		// 	keywords: keyword.value,
		// 	citylimit: true,
		// 	success: function(res) {
		// 		console.log(res, "回调成功", keyword.value)
		// 		if (keyword.value != '') {
		// 			tipsList.value=res.tips
		// 		} else {
		// 			tipsList.value.length = 0
		// 		}
		// 	},
		// 	fail: function(info) {
		// 		console.log(info, "回调失败")
		// 	}
		// })
		
	}
	let list = ref([])
	let indexList = ref([])
	let itemArr = ref([])
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.SystemInfo.getRegionList).then(res => {
			// list.value = res.data.list
			// console.log(AddList.value);
			res.data.list.forEach(ele => {
				indexList.value.push(ele.key)
				itemArr.value.push(ele.list)
			})
			console.log(indexList.value, itemArr.value);
		})
	}
	const toAdd = () => {
		uni.navigateTo({
			url: '/pages/addAddress/addAddress'
		})
	}
	const toSelectCity = () => {
		uni.navigateTo({
			url: '/pages/SelectCity/SelectCity'
		})
	}
	const bindClick = () => {

	}
	const toIndex = (v) => {
		let pages = getCurrentPages()
		let page = pages[pages.length - 2]
		let obj = {
			address: v.region_name,
			city_code: v.city_code,
			lng: v.lng,
			lat:  v.lat
		}
		if (page.route === 'pages/index/index') {
			uni.$emit('mapList1', obj)
			uni.navigateBack({
				delta: 1
			});
			return
		}
	}
	const toIndex1 = () => {
		let pages = getCurrentPages()
		let page = pages[pages.length - 2]
		let obj = {
			address: address.value,
			city_code: adcode.value,
			lng: longitude.value,
			lat: latitude.value
		}
		console.log(pages,page,"page");
		if (page.route === 'pages/index/index') {
			uni.$emit('mapList1', obj)
			uni.navigateBack({
				delta: 1
			});
			return
		}
	}

	const toIndex2 = (v) => {
		let pages = getCurrentPages()
		let page = pages[pages.length - 2]
		console.log(pages,page,"page");

		let location=v.location & typeof(v.location)=="string"?v.location:[uni.getStorageSync('longitude')||'',uni.getStorageSync('latitude')||'']
		if(!v.location){
			myAmapFun.getRegeo({
				location: v.location,
				success: function(data) {
					console.log(data, "回调成功")
					address.value = data[0].name
					adcode.value = data[0].regeocodeData.addressComponent.citycode
					if (data[0].regeocodeData.addressComponent.city && data[0]
						.regeocodeData.addressComponent.city.length > 0) {
						city.value = data[0].regeocodeData.addressComponent.city
					} else {
						city.value = data[0].regeocodeData.addressComponent.province
					}
					province_name.value = data[0].regeocodeData.addressComponent.province
					district_name.value = data[0].regeocodeData.addressComponent.district
				},
				fail: function(info) {
					console.log(info, "回调失败")
				}
			})
		}
		
		let obj = {
			address: v.name,
			province_name: province_name.value,
			city_name: city.value,
			district_name: district_name.value,
			lng: v.location.split(",")[0],
			lat: v.location.split(",")[1]
		}
		if (page.route === 'pages/index/index') {
			uni.$emit('mapList1', obj)
			uni.navigateBack({
				delta: 1
			});
			return
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	::v-deep .u-index-anchor {
		background-color: #f8f8f8 !important;
	}

	.list-cell {
		height: 110rpx;
		padding: 0 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		border-bottom: 2rpx solid #e7e7e7;
		background-color: #fff;
	}

	.group {
		overflow-y: auto;
	}

	.section_3 {
		padding: 25rpx 30rpx;
		background-color: #ffffff;
	}

	.space-x-31>view:not(:first-child),
	.space-x-31>text:not(:first-child),
	.space-x-31>image:not(:first-child) {
		margin-left: 31rpx;
	}

	.section_4 {
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
		border-radius: 34rpx;
		height: 68rpx;
	}

	.space-x-13>view:not(:first-child),
	.space-x-13>text:not(:first-child),
	.space-x-13>image:not(:first-child) {
		margin-left: 13rpx;
	}

	.image_6 {
		width: 28rpx;
		height: 28rpx;
	}

	.image_8 {
		width: 70rpx;
		height: 25rpx;
	}

	.image_7 {
		width: 57rpx;
		height: 29rpx;
	}

	.text_4 {
		margin-left: 33rpx;
		margin-top: 35rpx;
		color: #333333;
		font-size: 30rpx;
		font-family: PingFangSC;
		line-height: 29rpx;
	}

	.section_5 {
		margin-top: 26rpx;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.text_5 {
		color: #797979;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
	}

	.space-x-18>view:not(:first-child),
	.space-x-18>text:not(:first-child),
	.space-x-18>image:not(:first-child) {
		margin-left: 18rpx;
	}

	.image_9 {
		width: 29rpx;
		height: 29rpx;
	}

	.image_10 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3C2E;
	}

	.tipList {
		width: 100%;
		position: absolute;
		top: 120rpx;
		z-index: 999;

		.tipItem {
			padding: 20rpx 30rpx;
			width: 100%;
			background-color: #fff;
			border-bottom: 1rpx solid #f8f8f8;
		}
	}
</style>